<template>
  <!--  -->
  <layout title="设置" background="#fff">
    <div class="setting">
      <div class="setting-item" @tap="share">
        <image
          class="setting-item-left"
          :src="getImgSrc('/user/icon_share@2x.png')"
          mode="widthFix"
        />
        <div>推荐给好友</div>
        <image
          class="setting-item-right"
          :src="getImgSrc('/user/icon_arrow_right@2x.png')"
          mode="widthFix"
        />
      </div>
      <div class="setting-item" @tap="help">
        <image
          class="setting-item-left"
          :src="getImgSrc('/user/icon_help@2x.png')"
          mode="widthFix"
        />
        <div>帮助与反馈</div>
        <image
          class="setting-item-right"
          :src="getImgSrc('/user/icon_arrow_right@2x.png')"
          mode="widthFix"
        />
      </div>
      <div class="setting-item" @tap="about">
        <image
          class="setting-item-left"
          :src="getImgSrc('/user/icon_about@2x.png')"
          mode="widthFix"
        />
        <div>关于点我拿</div>
        <image
          class="setting-item-right"
          :src="getImgSrc('/user/icon_arrow_right@2x.png')"
          mode="widthFix"
        />
      </div>
      <div class="setting-item" @tap="logOutHandle" v-if="vuex_token">
        <image
          class="setting-item-left"
          :src="getImgSrc('/user/icon_my_logout@2x.png')"
          mode="widthFix"
        />
        <div>退出登录</div>
        <image
          class="setting-item-right"
          :src="getImgSrc('/user/icon_arrow_right@2x.png')"
          mode="widthFix"
        />
      </div>
    </div>

    <u-modal
      v-model="show"
      :show-title="false"
      :show-confirm-button="false"
      :show-cancel-button="false"
    >
      <view class="slot-content">
        <view class="score-modal">
          <image
            class="score-modal-icon"
            :src="getImgSrc('/hall/icon_close@2x.png')"
            @tap="show = false"
          />
          <view class="score-modal-head">请描述你的问题</view>
          <view class="score-modal-body">
            <textarea
              v-model="question"
              class="score-modal-area"
              placeholder="请输入"
              placeholder-class="task-modal-place"
            />
            <button class="score-modal-btn" @tap="triggerToSubmit">提交</button>
          </view>
        </view>
      </view>
    </u-modal>
  </layout>
</template>
<script>
export default {
  name: "setting",
  data() {
    return {
      show: false,
      question: "",
    };
  },
  computed: {},
  onLoad(option) {},
  onShow() {},
  onReady() {},
  watch: {},
  methods: {
    logOutHandle() {
      this.logOut(() => {
        uni.redirectTo({
          url: "/pages/sys/home/index",
        });
      });
    },
    about() {
        uni.navigateTo({
        url: '/pages/sys/user/schema'
      })
    },
    help() {
      this.show = true;
    },
    triggerToSubmit() {
      this.$u.api
        .feedback({
          feedback: this.question,
        })
        .then((res) => {
          this.question = "";
          this.show = false;
        });
    },
    share() {
      this.$bridge.callHandler(
        "triggerToShareWx",
        JSON.stringify({
          title: "有新的任务等待领取",
          content: "赏金猎人请于APP中接单",
          hrefUrl: `${window.location.origin}${window.location.pathname}#/pages/sys/share/index`,
          // img: "https://harry-run-prod.oss-cn-zhangjiakou.aliyuncs.com/img/good/photo/2022-02-27/aeffd705-b5ef-4a99-a423-8dc20f.png",
          img: "https://harry-run-prod.oss-cn-zhangjiakou.aliyuncs.com/img/good/photo/2022-04-02/2395b0cf-ee8d-419b-b85f-fdb563.png"

        }),
        (args) => {}
      );
    },
  },
};
</script>
<style lang="scss">
.setting {
  height: 100%;
  background: #fff;
  padding: 45rpx 30rpx;
  &-item {
    padding: 35rpx 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 36rpx;
    border-bottom: 1rpx solid #eaeaea;
    &-left {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
    &-right {
      width: 22rpx;
      height: 36rpx;
      margin-left: auto;
    }
  }
}
.score-modal {
  width: 600rpx;
  padding-bottom: 60rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: relative;
  text-align: center;

  &-icon {
    position: absolute;
    height: 37rpx;
    width: 36rpx;
    right: 38rpx;
    top: 40rpx;
  }

  &-head {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #4b4b4b;
    line-height: 40rpx;
    margin-bottom: 60rpx;
    padding-top: 57rpx;
  }

  &-area {
    text-align: left;
    padding: 22rpx 21rpx;
    box-sizing: border-box;
    width: 491rpx;
    height: 141rpx;
    background: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    margin: 0 auto;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 28rpx;
  }
  &-btn {
    margin: 63rpx auto 0;
    width: 280rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #4aabf6, #4675f6);
    box-shadow: 0rpx 16rpx 30rpx 0rpx rgba(74, 169, 246, 0.2);
    border-radius: 40rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 80rpx;
    color: #ffffff;
  }
}
</style>
